<template>
  <div class="city">
    <nav-bar>
      <div slot="icon-left" class="head-left" @click="back">
        <span class="iconfont">&#xe630;</span>
      </div>
      <div slot="icon-center" class="head-center">
        选择城市
      </div>
    </nav-bar>
    <city-head @itemClick="itemClick"/>
    <city-sort :hot-city="hotCity" :sort-list="sortList" :city-letters="cityLetters" />
  </div>
</template>

<script>

// common中的组件
import NavBar from "@/components/common/navbar/NavBar";
// 子组件
import CityHead from './cityPages/CityHead'
import CitySort from "./cityPages/CitySort";
export default {
  name: "City",
  data() {
    return {
      currentIndex: 0, //记录子元素中哪个元素点击了
      hotCity: [], // 保存热门城市数据
      sortList: [], // 保存字母排序
      cityLetters: [], //
      scroll: null,
    }
  },
  components: {
    NavBar,
    CityHead,
    CitySort,
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    itemClick(index) {
      this.currentIndex = index
    },
    getCityData() {
      this.$http.get('http://localhost:8080/data/city.json')
      .then((res) => {
        const data = res.data.data[this.currentIndex]
        this.hotCity = data.hotCity
        this.sortList = data.sortList
        this.cityLetters = data.cityLetters
      })
      .catch(err=>{console.log(err)}
      )
    },
  },
  created() {
    this.getCityData()
  }
}
</script>

<style scoped>
  .city {
    width: 100vw;
    /*height: 100vh;*/
    background-color: #f5f5f5;
  }
  .head-left {
    width: .88rem;
    text-align: center;
    font-weight: bold;
  }
  .head-center {
    width: calc(100vw - .88rem);
    color: #fff;
    font-size: .36rem;
    text-align: center;
  }
  .wrapper {
    position: absolute;
    top: 1.76rem;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100vh - 1.76rem);
    overflow: hidden;
  }
</style>
